<template>
  <div class="user-page">
    <div class="bgpicture">
      <van-icon
        name="arrow-left"
        class="back_button"
        size="30px"
        @click="$router.back()"
      />
      <img
        src="https://img0.baidu.com/it/u=1020757406,2710278676&fm=26&fmt=auto&gp=0.jpg"
        alt=""
      >

    </div>
    <div
      class="user-info-wrap"
      v-if="userid"
    >
      <div class="base-info-wrap">
        <div class="avatar-title-wrap">
          <van-image
            class="avatar"
            round
            fit="cover"
            :src="user.baseUrl+user.photo"
          />
          <div class="title">{{ user.name }}</div>
        </div>
        <van-button
          size="nomral"
          color="#fe2b54"
          background="#fe2b54"
          @click="onFollowUser"
          class="sizeButton"
        >
          <span v-show='user.is_followed'>已关注</span>
          <span v-show='!user.is_followed'>+关注</span>
        </van-button>
        <van-button
          size="nomral"
          color="#3a3a44"
          @click="moveToDialog"
          class="sizeButton"
        >私信</van-button>
      </div>
      <div class="introduce">{{user.introduce}}</div>
      <van-divider style="width=100%" />

      <div class="userInfo">
        <van-tag
          text-color="#929398"
          color="#242730"
          size="medium"
          type="primary"
          v-show="user.location"
        >{{user.location}}</van-tag>
        <van-tag
          style="margin-left =5px"
          text-color="#929398"
          color="#242730"
          size="medium"
          type="primary"
          v-show="user.gender===0||user.gender==1"
        >{{user.gender?"女":"男"}}</van-tag>
        <van-tag
          style="margin-left =5px"
          text-color="#929398"
          color="#242730"
          size="medium"
          type="primary"
          v-show="user.birthday"
        >{{user.birthday}}</van-tag>
      </div>
      <div
        class="count_wrap"
        @click="$router.push({path:`/user/${user.userid}/follow?tab=0`})"
      >
        <span class="count"> {{ follow }} </span>
        <span class="count_text">关注</span>
      </div>
      <div
        class="count_wrap"
        @click="$router.push({path:`/user/${user.userid}/follow?tab=1`})"
      >
        <span class="count">{{fans}} </span>
        <span class="count_text">粉丝</span>
      </div>
      <div class="count_wrap">
        <span class="count">{{ like_count }}</span>
        <span class="count_text">获赞</span>
      </div>
    </div>
    <!-- /已登录：用户信息 -->
    <!-- 视频 -->
    <!-- 视频 -->
    <van-tabs
      v-model="active"
      color="#face15"
      aria-selected="#fff"
      line-width='33.3%'
      background="#191923"
      title-active-color='#fff'
    >
      <van-tab :title="`作品 ${user.myvideos.length}`">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad(0)"
        >
          <div class="videoWrap">
            <div
              class="videoPreview"
              v-for="(video,index) in myvideos"
              :key="video._id"
              @click="$router.push({
                name:'userVideo',
                params:{
                  userid:user.userid,
                  videoTpye:0,
                  videoid:video._id,
                  index
                }
              })"
            >
              <div class="loveNum">
                <van-icon
                  name="like-o"
                  size="18px"
                /> {{video.likeNum}}
              </div>
              <img :src="video.baseUrl+video.poster">
              <div id="output"></div>
            </div>
          </div>
        </van-list>

      </van-tab>
      <van-tab :title="`喜欢 ${user.likevideos.length}`">
        <van-list
          v-model="loading2"
          :finished="finished2"
          finished-text="没有更多了"
          @load="onLoad(1)"
        >
          <div class="videoWrap">
            <div
              class="videoPreview"
              v-for="(video,index) in likevideo"
              :key="video._id"
              @click="$router.push({
                name:'userVideo',
                params:{
                  userid:user.userid,
                  videoTpye:1,
                  videoid:video._id,
                  index
                }
              })"
            >
              <div class="loveNum">
                <van-icon name="like-o" /> {{video.likeNum}}
              </div>
              <img :src="video.baseUrl+video.poster">
              <div id="output"></div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUserInfo, getUserSelfVideo, addUserFollow, removeUserFollow } from '@/api/user'
import globalBus from '@/utils/global-bus'

export default {
  name: 'MyPage',
  data () {
    return {
      user: {
        baseUrl: '',
        myvideos: [],
        likevideos: []
      }, // 用户信息对象
      isShowUserAbout: false,
      fans: 0,
      follow: 0,
      like_count: 0,
      myvideos: [],
      likevideo: [],
      active: 0,
      finished: true,
      loading: false,
      finished2: true,
      loading2: false,
      userVideoPage: 0,
      likeVideoPage: 0
    }
  },
  props: {
    userid: {
      type: String,
      required: true
    }
  },
  created () {
    if (this.userid) {
      this.userVideoPage = 0
      this.likeVideoPage = 0
      this.loadUser()
    }
    globalBus.$on('user-update', () => {
      this.loadUser()
    })
  },
  beforeCreate () {
  },
  activated () {
    if (this.userid) {
      this.loadUser()
    }
  },
  deactivated () {
    this.userVideoPage = 0
    this.likeVideoPage = 0
    this.myvideos = []
    this.likevideo = []
  },
  methods: {
    async loadUser () {
      const res = await getUserInfo(this.userid)
      const user = res.data.data
      this.user = user
      this.fans = user.fans.length
      this.follow = user.follow.length
      const res2 = await getUserSelfVideo(user.userid, 0, ++this.userVideoPage)
      const myvideos = res2.data.data
      this.myvideos = myvideos
      let likeCount = 0
      const likevideo = await getUserSelfVideo(this.user.userid, 1, ++this.likeVideoPage)
      this.likevideo.push(...likevideo.data.data)
      myvideos.forEach(v => {
        likeCount = v.likeNum + likeCount
      })
      this.finished = false
      this.finished2 = false
      this.like_count = likeCount
    },
    async loadingMyVideos () {
      const res2 = await getUserSelfVideo(this.user.userid, 0, ++this.userVideoPage)
      const myvideos = res2.data.data
      this.loading = false
      if (myvideos.length === 0) {
        this.finished = true
      } else {
        this.myvideos.push(...myvideos)
      }
    },
    async loadingLikeVideos () {
      const likevideo = await getUserSelfVideo(this.user.userid, 1, ++this.likeVideoPage)
      const addlikevideo = likevideo.data.data
      this.loading2 = false
      if (addlikevideo.length === 0) {
        this.finished2 = true
      } else {
        this.likevideo.push(...addlikevideo)
      }
    },

    async onFollowUser () {
      if (!this.$store.state.user) { return this.$toast('未登录,请先登录账号') }
      try {
        if (this.user.is_followed) {
          await removeUserFollow(this.$store.state.user.userid, { userid: this.userid })
          this.user.is_followed = false
        } else {
          await addUserFollow(this.$store.state.user.userid, { userid: this.userid })
          this.user.is_followed = true
        }
        globalBus.$emit('follow-update', this.user.is_followed)
      } catch (error) {
      }
    },
    onLoad (value) {
      if (value) {
        this.loadingLikeVideos()
      } else {
        this.loadingMyVideos()
      }
    },
    moveToDialog () {
      if (!this.$store.state.user) { return this.$toast('未登录,请先登录账号') }
      this.$router.push({
        name: 'userChat',
        params: {
          chatUserid: this.user.userid
        }
      })
    }
  }

}

</script>

<style lang="less" scoped>
.bgpicture {
  width: 100%;
  height: 140px;
  img {
    width: 100%;
    height: 100%;
  }
}

.user-page {
  .user-info-wrap {
    box-sizing: border-box;
    background-size: cover;
    padding: 40px 20px;
    font-size: 15px;
    .base-info-wrap {
      margin-top: -55px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .avatar-title-wrap {
        display: flex;
        align-items: center;
        .avatar {
          margin-right: 15px;
          width: 66px;
          height: 66px;
          padding: 2px;
          background: #fff;
        }
      }
    }
    .count_wrap {
      font-size: 18px;
      margin-top: 10px;
      margin-left: 8px;
      float: left;
      .count_text {
        color: #8b8c92;
      }
    }
  }

  > .van-cell-group {
    margin-top: 10px;
  }
  .introduce {
    margin-top: 5px;
  }
  .userabout {
    position: fixed;
    top: 0;
    right: 0;
  }
  .videoWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    .videoPreview {
      width: 33.3%;
      height: 150px;
      position: relative;
      .loveNum {
        font-size: 18px;
        position: absolute;
        z-index: 9999;
        bottom: 3px;
        right: 3px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .van-popup {
    background: #191923;
  }
  .back_button {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(black, black, black, 0.5);
    border-radius: 20px;
  }
  .sizeButton {
    margin-top: 20px;
  }
  .van-button--default {
  }
}
</style>
